<template>
  <div>
    <el-cascader
      :value="value"
      style="width: 100%"
      :options="options"
      :props="{ label: 'name', value: 'id' }"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { getDepartmentRequest } from '@/api/department'
import { transfromListToTree } from '@/utils'

export default {
  name: 'SelectTree',
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      options: []
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentRequest()
      // 下面data数据，是给el-tree组件使用的 树形结构
      // 下面这句话，是将treeList数据更新，然后就会触发dom更新，但是dom更新是异步的
      this.options = transfromListToTree(res.data, 0)
    },
    handleChange(params) {
      // 判断参数一定要细致 --- 等下给你讲之前工作里面的参数导致的bug
      if (params && Array.isArray(params) && params.length > 0) {
        this.$emit('input', params[params.length - 1])
      } else {
        // 如果没有值，就要返回null，he初始值一样
        this.$emit('input', null)
      }
    }
  }
}
</script>
